<template>
	<!-- //微信小程序 ：style="[]" 要用数组的形式 -->
	<!-- //微信小程序 ：style="[]" 要用数组的形式 -->
	<view class="custom-page" :style="[customPage.page]">

		<!-- navgation -->
		<view class="custom-navigation-bar" :style="[customPage.nav]">
			<view class="custom-navigation-inner" style="justify-content: flex-start;">
				<view class="l_back" @tap.stop="OnBack">
					<image style="width: 40rpx;height:40rpx" src="@/static/icons/left_arrow.png"></image>
				</view>
				<view class="navigation-title" style="color: #FFFFFF;">登录</view>

			</view>
		</view>
		<image class="page_bg" src="@/static/images/map/bg.jpg"></image>
		<view class="flex-column l_page_content">
			<view class="flex-column l_card">
				<input class="l_input" placeholder="账号" v-model="form.userName" />
				<input class="l_input" placeholder="密码" type="password" v-model="form.password" />
				<view class="flex-column" style="width: 100%;height: auto;margin-top:100rpx">
					<checkbox-group @change="OnRadioChange">
						<view style="display: flex;align-items: center; color: #B1B9C6;font-size: 28rpx;">
							<checkbox :value="'agree'" :checked="isChecked" />
							我已阅读并同意
							<navigator style="color:#929292" url="/pages/user/serviceRules">《用户协议》</navigator>
							全部内容
						</view>
					</checkbox-group>
					<view class="open_c_button" @tap.stop="login()">登录</view>
				</view>
				<view class="wx_c">
					<!-- <view>其它方式登录</view> -->
					<view>微信快捷登录</view>
					<image @tap.stop="OnWxLogin" class="wx" src="../../static/icons/wx.png"></image>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import Adpation from '@/library/platform/Adpation.js';
	import CustomNav from '@/library/mixins/customNav.js';
	import Local from '@/library/utils/storage.js';
	import * as AuthApis from '@/network/apis/auth.js';

	export default {
		mixins: [Adpation, CustomNav],
		data() {
			return {
				ISSUBMIT: false,
				form: {
					userName: '',
					password: ''
				},
				isChecked: false
			}
		},
		onLoad() {
			// let res = Local.GetUserAccount();
			// if (res) {
			// 	if (res.userName) this.form.userName = res.userName;
			// 	if (res.password) this.form.password = res.password;
			// }
		},
		methods: {
			OnBack() {
				if (this.ISSUBMIT) return;
				this.ISSUBMIT = true;
				uni.switchTab({
					url: '/pages/index/index'
				})
				this.ISSUBMIT = false;
			},
			OnRadioChange(e) {

				this.isChecked = !this.isChecked;
			},
            async OnWxLogin(){
				if (this.ISSUBMIT) return;
				this.ISSUBMIT = true;
				// if (!this.isChecked) {
				// 	uni.showToast({
				// 		title: '请阅读并同意《用户协议》',
				// 		icon: 'none',
				
				// 	});
				// 	this.ISSUBMIT = false;
				// 	return;
				// }
				uni.showLoading({
					title: '登录中...',
					mask: true
				});
				let wxres = await uni.login({
					provider:'weixin'
				})
				console.log(wxres)
				if(wxres.code&&wxres.code!=''){
					let res =await AuthApis.vxSignIn(wxres.code);
					 uni.hideLoading();
					 if (res.success) {
					 	console.log(res)
					 	if (res.data) {
					 		if (res.data.userInfo.menus) delete res.data.userInfo.menus
					 		Local.SetUserInfo(res.data);
					 
					 		let userRes = await AuthApis.getuserinfo(); //获取用户信息
					 		if (userRes && userRes.success) {
					 			if (userRes.data) {
					 				Local.SetUserData(userRes.data);
					 			}
					 
					 		}
					 
					 		uni.switchTab({
					 			url: '/pages/index/index'
					 		})
					 	}
					 } else {
					 	console.log(res)
					 	uni.showToast({
					 		icon: 'none',
					 		title: res.message ? res.message : '失败'
					 	})
					 }
					
				}else{
					 uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: wxres.errMsg ? wxres.errMsg : '登录失败，请稍后重试'
					})
				}
			
				this.ISSUBMIT = false;
			},
			async login() {
				if (this.ISSUBMIT) return;
				this.ISSUBMIT = true;
				if (this.form.userName == '' || this.form.userName.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请填写用户名'
					})
					this.ISSUBMIT = false;
					return;
				}
				if (this.form.password == '' || this.form.password.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请填写密码'
					})
					this.ISSUBMIT = false;
					return;
				}

				if (!this.isChecked) {
					uni.showToast({
						title: '请阅读并同意《用户协议》',
						icon: 'none',

					});
					this.ISSUBMIT = false;
					return;
				}

				uni.showLoading({
					title: '登录中...',
					mask: true
				});
				let res = await AuthApis.login(this.form.userName, this.form.password);
				uni.hideLoading();
				if (res.success) {
					console.log(res)
					if (res.data) {
						if (res.data.userInfo.menus) delete res.data.userInfo.menus
						Local.SetUserInfo(res.data);
						Local.SetUserAccount(this.form);

						let userRes = await AuthApis.getuserinfo(); //获取用户信息
						if (userRes && userRes.success) {
							if (userRes.data) {
								Local.SetUserData(userRes.data);
							}

						}

						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				} else {
					console.log(res)
					uni.showToast({
						icon: 'none',
						title: res.message ? res.message : '失败'
					})
				}

				this.ISSUBMIT = false;
			}
		}
	}
</script>

<style>
	@import url('@/styles/layout/lform.css');

	.page_bg {
		top: 0rpx;
		left: 0;
		position: fixed;
		height: 336rpx;
		width: 100vw;
		z-index: 1;
	}

/* 	.open_c_button {
		margin-top: 50rpx;
		width: 388rpx;
		height: 80rpx;
		border-radius: 100rpx;
		background-color: #FFFFFF;
		color: var(--theme-color);
		font-size: 32rpx;
		letter-spacing: 2px;
		text-align: center;
		line-height: 80rpx;
		border: 2px solid var(--theme-color);
	} */

	.open_skip_button {

		position: absolute;
		bottom: calc(12rpx + var(--page-bottom));
		right: calc(58rpx + var(--page-right));
		width: 164rpx;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 8px;
		background-color: var(--theme-color);
		color: #FFFFFF;
		font-size: 28rpx;
		text-align: center;
	}
	.open_c_button {
		margin-top: 50rpx;
		width: 600rpx;
		height: 80rpx;
		background: var(--theme-color);
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(62, 122, 239, 0.25);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	checkbox .wx-checkbox-input {
		border-radius: 50% !important;
		/* color: #ffffff !important; */
	}

	/* checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  color: #fff;
  background: #9FD8F5;
}

.wx-checkbox-input.wx-checkbox-input-checked {
  border: none !important;
} */
    .wx_c{
		margin-top: 100rpx;
		color: #B1B9C6;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.wx {
		margin: 20rpx 0 20rpx;
		flex-shrink: 0;
		width: 100rpx;
		height: 100rpx;
	}
</style>